<template>
    <div>
        <div v-for="(item,index) in listData" :key="index">
            <van-cell-group class="order-item" >
                <van-panel :title="'订单：'+item.orderNo" :status="item.orderStatus" >
                <div slot="header" @click="linkOrder(item.orderNo)">
                    <van-cell class="title" :title="'订单：'+item.orderNo" :value="item.orderStatusName"/>
                </div>
                <div @click="linkOrder(item.orderNo)">
                    <div v-if="item.orderDetailResultDtoList.length==1" v-for="(product,i) in item.orderDetailResultDtoList" :key="i">
                        <product-card :product='product' />
                    </div>
                    <div  v-if="item.orderDetailResultDtoList.length>1" class="more" >
                        <div class="item" v-for="(product,i) in item.orderDetailResultDtoList" :key="i">
                            <div >
                                <img :src="product.itemNarrowPic"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div slot="footer">
                    <van-button size="small red" v-if="item.orderStatus=='0'" @click="pay(item)">去支付</van-button>
                    <van-button size="small" v-if="item.orderStatus=='0'" @click="cancelOrder(item)">取消</van-button>
                    <van-button size="small" v-if="item.orderStatus=='2'" @click="delivery(item)">确认收货</van-button>
                    <van-button size="small" v-if="item.orderStatus=='1'||item.orderStatus=='0'" @click="changeinfo(item)">修改信息</van-button>
                    <!-- <van-button size="small" type="danger">支付</van-button> -->
                </div>
                </van-panel>
            </van-cell-group>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import {cancelOrder,confirmRecv,findOrderByNo } from "../../../api/page.js";
export default {
    components: {
        [Dialog.name]:Dialog,
    },
    props:["listData"],
    data(){
        return{
            active:0,
        }
    },
    methods:{
        linkOrder(orderNo){
           this.$router.push({name:"aftersaleDetail",query:{orderNo:orderNo}});
        },
        pay(item){
            this.$router.push({name:"payment",query:{orderNo:item.orderNo}});
        },
        // 取消订单
        cancelOrder(item){
            Dialog.confirm({
                message: '确认取消订单？'
            }).then(() => {
                cancelOrder({
                    orderNo:item.orderNo
                }).then(res => {
                    if(res.retCode=="200"){
                        this.$toast('订单已取消~');
                        this.$store.dispatch("setCityName", "5");
                        this.$emit('findOrderByStatus', {});
                    }
                });
            })            
        },
        // 确认收货
        delivery(item){
            Dialog.confirm({
                message: '确认收货？'
            }).then(() => {
                confirmRecv({
                    orderNo:item.orderNo
                }).then(res => {
                    if(res.retCode=="200"){
                        this.$toast('收货完成~');
                        this.$store.dispatch("setCityName", "3");
                        this.$emit('findOrderByStatus', {});
                    }
                });
            }) 
        },
        // 修改信息
        changeinfo(item){
            findOrderByNo({
                orderNo:item.orderNo
            }).then(res => {
                if(res.retCode=="200"){
                    let address = {
                        province : res.data.orderShippingResultDto.recvProvince,
                        city : res.data.orderShippingResultDto.recvCity,
                        county : res.data.orderShippingResultDto.recvDistrict,
                        addressDetail : res.data.orderShippingResultDto.recvAddress,
                        name : res.data.orderShippingResultDto.recvName,
                        tel : res.data.orderShippingResultDto.recvPhone,
                        areaCode : res.data.orderShippingResultDto.districtCode,
                        msg:res.data.userMemo,
                    }
                    localStorage.setItem("address",JSON.stringify(address));
                    this.$router.push({name:"addressEdit",query:{id:3,type:"amend",orderNo:item.orderNo}});
                }
            });
        }
    },
    mounted(){

    },
}
</script>

<style lang="less">

.order-item{
    margin-bottom: 10px;
    font-size: 12px;
    .title{
        border-bottom: 1px solid #e5e5e5;

        .van-cell__title{
            flex: 2;
        }
        .van-cell__value{
            color: red;
        }
    }
    .van-panel__footer {
        text-align: right;
        border-bottom: 1px solid #e5e5e5;
    }
    .van-button {
        margin-left: 5px;
    }
    .red{
        color: #e10f02;
        border-color: #e10f02;
    }
    .total{
    position: absolute;
    top: 17px;
    left: 15px;
    font-size: 13px;
    }
    .more{
        overflow-x: scroll;white-space: nowrap;    -webkit-overflow-scrolling: touch;    margin: 5px 0 5px 15px;
        .item{
            width: 90px; height:90px; margin-right: 10px;display: inline-block;
            img{
                width: 100%;
            }
        }
    }
}
</style>
